import React from 'react';
import numeral from 'numeral';
import ChartCard from '@/components/ChartCard';
import { Divider, Tooltip } from 'antd';
import MiniAreaChart from './miniAreaChart';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
type PropField = {
  lineDatas: Record<string, any>[];
  chainData: Record<string, any>;
  title: string;
  loading: boolean;
  timeLevel: string;
  cyno: string;
};
const LineChartCard: React.FC<PropField> = (props) => {
  const { lineDatas, chainData, title, loading, timeLevel, cyno } = props;
  let tooltip = '';
  let cynoName = '本外币';
  if (cyno === '2') {
    cynoName = '人民币';
  } else if (cyno === '3') {
    cynoName = '外币';
  }
  let timeLevelName = '天';
  if (timeLevel === 'year') {
    timeLevelName = '年';
  } else if (timeLevel === 'month') {
    timeLevelName = '月';
  } else if (timeLevel === 'quarter') {
    timeLevelName = '季';
  }
  let acbl = 0;
  if (lineDatas && lineDatas.length > 0) {
    acbl = lineDatas[lineDatas.length - 1].ACBL;
    for (let i = 0; i < lineDatas.length; i++) {
      lineDatas[i].ACBL = Number(lineDatas[i].ACBL);
    }
    tooltip = `显示从${lineDatas[0].TIME}到${
      lineDatas[lineDatas.length - 1].TIME
    }每${timeLevelName}的时点，单位：${cynoName}万元`;
  }
  const { bsr, bsn } = chainData;
  const bsrImg =
    bsr > 0 ? (
      <CaretUpOutlined style={{ color: 'red' }} />
    ) : (
      <CaretDownOutlined style={{ color: 'green' }} />
    );
  const bsnImg =
    bsn > 0 ? (
      <CaretUpOutlined style={{ color: 'red' }} />
    ) : (
      <CaretDownOutlined style={{ color: 'green' }} />
    );
  return (
    <ChartCard
      bordered={false}
      loading={loading}
      title={title}
      action={
        <Tooltip title={tooltip}>
          {' '}
          <span>单位：万元</span>
        </Tooltip>
      }
      total={numeral(acbl).format('0,0')}
      footer={
        <>
          <span>
            比上日：{numeral(bsr).format('0,0')}
            {bsrImg}
          </span>
          <Divider type="vertical" />
          <span>
            比上年：{numeral(bsn).format('0,0')}
            {bsnImg}
          </span>
        </>
      }
      contentHeight={106}
    >
      <MiniAreaChart datas={lineDatas} xCol="TIME" yCol="ACBL" height={106} />
    </ChartCard>
  );
};

export default LineChartCard;
